<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网络安全需求管理</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 98%; margin: 0 auto; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; }
        .form-group input, .form-group select { width: 100%; padding: 8px; box-sizing: border-box; }
        .btn { padding: 10px 15px; background-color: #007BFF; color: white; border: none; cursor: pointer; align-items: center; justify-content: center; }
        .btn:hover { background-color: #0056b3; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        table, th, td { border: 1px solid #ddd; }
        th, td { padding: 10px; text-align: left; }
        th { background-color: #f2f2f2; }
        .header-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;margin-top: 10px; }
        .auto-wrap {
            white-space: pre-wrap; /* 保留空白符序列，但是正常地进行换行 */
            word-wrap: break-word; /* 在长单词或 URL 地址内部进行换行 */
            max-width: 100%; /* 确保内容不会溢出单元格 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header-container">
            <button class="layui-btn layui-btn-normal" id="add-req" disabled>新增需求</button>
            <button class="layui-btn layui-btn-normal" id="sync-req" title="同步安全需求到当前车型项目">同步需求</button>
            <!-- 添加批量导入按钮 -->
            <button type="button" class="layui-btn layui-btn-normal" onclick="uploadFile('cybersecurityReqFile', 'CybersecurityReqTable')" title="清空后从Excel文件批量导入安全需求库">
                <i class="layui-icon" style="font-size: 16px; color: whitesmoke;">&#xe656;</i> 批量导入
            </button>
        </div>
        <div class="layui-form" id="table-list">
            <table class="layui-hide" id="cybersecurityReqTable" lay-filter="cybersecurityReqTable"></table>
        </div>
        <!-- 隐藏的文件选择框 -->
        <input type="file" id="cybersecurityReqFile" accept=".xlsx, .xls" style="display: none;">
    </div>

    <script src="/static/js/jquery-3.6.0.min.js"></script>
    <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            // 计算表格的高度
            var windowHeight = window.innerHeight;
            var tableHeight = windowHeight - 50; // 减去其他元素的高度和一些边距
            // 渲染表格
            table.render({
                elem: '#cybersecurityReqTable',
                url: '/getCybersecurityReq',
                height: tableHeight,
                page: true,
                limit: 50,
                limits: [50, 100, 200, 500],
                cols: [[
                    {field: 'id', title: 'ID', width: 60, align: 'center', hide: true},
                    {type: 'numbers', title: '序号', width: 60, align: 'center', fixed: 'left'}, // 添加'序号'列
                    {field: 'type', title: '分类', width: 100, align: 'center'},
                    {field: 'feature', title: '资产', width: 100, align: 'center'},
                    {field: 'name_or', title: '原始需求标题', width: 150, align: 'center'},
                    {field: 'code_or', title: '原始需求编号', width: 120, align: 'center'},
                    {field: 'desc_or', title: '原始需求描述', width: 260, align: 'left', templet: function(d) {
                        return '<div class="auto-wrap">' + d.desc_or + '</div>';
                    }},
                    {field: 'name_dr', title: '设计需求标题', width: 210, align: 'center'},
                    {field: 'code_dr', title: '设计需求编号', width: 100, align: 'center'},
                    {field: 'desc_dr', title: '设计需求描述', width: 320, align: 'left', templet: function(d) {
                        return '<div class="auto-wrap">' + d.desc_dr + '</div>';
                    }},
                    {field: 'state', title: '状态', width: 100, align: 'center'},
                    {field: 'cal1', title: 'CAL1', width: 100, align: 'center'},
                    {field: 'cal2', title: 'CAL2', width: 100, align: 'center'},
                    {field: 'cal3', title: 'CAL3', width: 100, align: 'center'},
                    {field: 'cal4', title: 'CAL4', width: 100, align: 'center'},
                    {field: 'R155', title: 'R155', width: 100, align: 'center'},
                    {field: 'R156', title: 'R156', width: 100, align: 'center'},
                    {field: 'GB 44495', title: 'GB 44495', width: 100, align: 'center'},
                    {field: 'GB 44496', title: 'GB 44496', width: 100, align: 'center'},
                    {field: 'other', title: '其他来源', width: 100, align: 'center'},
                    {field: 'gb_new_req', title: '国标新增需求', width: 100, align: 'center'},
                    {field: 'remark', title: '备注', width: 200, align: 'center'},
                    {#{field: 'req_basis', title: '需求依据', width: 150, align: 'center'},#}
                    {title: '操作', width: 150, align: 'center', toolbar: '#barDemo'}
                ]],
                done: function (res, curr, count) {
                    console.log('表格渲染完成');
                }
            });

            // 工具栏事件
            table.on('tool(cybersecurityReqTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    layer.open({
                        type: 2,
                        title: '编辑网络安全需求',
                        content: '/editCybersecurityReqForm?id=' + data.id,
                        area: ['800px', '600px'],
                        btn: ['保存', '取消'],
                        yes: function(index, layero){
                            var iframeWindow = window['layui-layer-iframe'+ index],
                                submitID = 'LAY-user-back-submit',
                                submit = layero.find('iframe').contents().find('#'+ submitID);

                            // 模拟点击提交按钮
                            submit.click();
                        }
                    });
                } else if(obj.event === 'del'){
                    layer.confirm('确定删除该需求吗？', function(index){
                        $.ajax({
                            url: '/deleteCybersecurityReq/' + data.id,
                            type: 'DELETE',
                            success: function(res){
                                if(res.code === 0){
                                    obj.del();
                                    layer.close(index);
                                    layer.msg('删除成功');
                                } else {
                                    layer.msg('删除失败');
                                }
                            }
                        });
                    });
                }
            });

            // 新增按钮点击事件
            $('#add-req').on('click', function(){
                layer.open({
                    type: 2,
                    title: '新增网络安全需求',
                    content: '/addCybersecurityReqForm',
                    area: ['800px', '600px'],
                    btn: ['保存', '取消'],
                    yes: function(index, layero){
                        var iframeWindow = window['layui-layer-iframe'+ index],
                            submitID = 'LAY-user-back-submit',
                            submit = layero.find('iframe').contents().find('#'+ submitID);

                        // 模拟点击提交按钮
                        submit.click();
                    }
                });
            });
        });

        // 批量导入函数
        function uploadFile(fileInputId, tableName) {
            // 触发文件选择框的 click 事件
            document.getElementById(fileInputId).value = '';
            document.getElementById(fileInputId).click();

            // 监听文件选择框的 change 事件
            document.getElementById(fileInputId).onchange = function () {
                var fileInput = document.getElementById(fileInputId);
                var file = fileInput.files[0];
                if (!file) {
                    alert('请选择一个文件');
                    return;
                }

                var formData = new FormData();
                formData.append('file', file);
                formData.append('tableName', tableName);
                {#console.log('start upload...............');#}
                fetch('/upload', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    {#console.log('end upload...............');#}
                    alert(data.msg);
                    // 如果上传成功，刷新表格
                    {#console.log(data.msg);#}
                    {#console.log(data.status);#}
                    if (data.status === 'success') {
                        {#console.log('return is success');#}
                        layui.table.reload('cybersecurityReqTable');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('上传失败');
                });
            };
        }
        // 同步需求按钮点击事件
    $('#sync-req').on('click', function() {
    // 显示加载层
    var loadingIndex = layer.load(1, {
        shade: [0.1, '#fff'] // 0.1透明度的白色背景
    });

    // 调用 Flask 后端的 /sync_req 接口
    $.ajax({
        url: '/sync_req',
        type: 'POST',
        success: function(res) {
            // 关闭加载层
            layer.close(loadingIndex);

            // 根据返回的信息显示同步结果
            if (res.code === 0) {
                layer.msg(res.msg, { icon: 1 });
                // 如果同步成功，刷新表格
                {#layui.table.reload('cybersecurityReqTable');#}
            } else {
                layer.msg('同步失败: ' + res.msg, { icon: 2 });
            }
        },
        error: function(xhr, status, error) {
            // 关闭加载层
            layer.close(loadingIndex);

            // 显示错误信息
            layer.msg('同步请求失败: ' + error, { icon: 2 });
        }
    });
});
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</body>
</html>